<template>
	<view class="content">
		<view class="warp">
			<view class="row" @click="tolist()">
				<label><span style="color:red">*</span>产品名称:</label><input class="flex-item-inputs"
					placeholder-style="color:rgb(255 255 255 / 0.7);" v-model="infos.productName"
					placeholder="请输入产品名称" />
			</view>
			<view class="row">
				<label>合同号:</label><input class="flex-item-inputs" placeholder-style="color:rgb(255 255 255 / 0.7);"
					v-model="infos.contractNo" placeholder="请输入合同号" />
			</view>
			<view class="row">
				<label>数量:</label><input class="flex-item-inputs" placeholder-style="color:rgb(255 255 255 / 0.7);"
					v-model="infos.count || infos.productCount" placeholder="请输入数量" v-on:input="changecount()" />
			</view>
			<view class="row">
				<label>单价:</label><input class="flex-item-inputs" placeholder-style="color:rgb(255 255 255 / 0.7);"
					v-model="infos.taxPrice || infos.buyTaxPrice" placeholder="请输入单价" />
			</view>
			<view class="row">
				<label><span style="color:red">*</span>金额:</label><input class="flex-item-inputs"
					placeholder-style="color:rgb(255 255 255 / 0.7);" v-model="infos.taxAmount" placeholder="请输入金额"
					type="number" />
			</view>

			<view class="house_w">
				<!--入库仓库：{{goodsinfos.warehouseName}}-->
				<view class="row">
					<label><span style="color:red">*</span>入库仓库:</label>
					<view class="flex-item" style="width: 78%;">
						<text class="down-icon"></text>
						<picker :value="house_index" :range="warehouseLists" :range-key="'name'" class="input"
							@change="bindPickerChange($event,'house_index','inwarehouseId','warehouseLists')">
							<view class="uni-input">{{warehouseLists[house_index].name}}</view>
						</picker>
					</view>
				</view>
			</view>

			<view class="house_w">
				<view class="row">
					<label>入库库位:</label>
					<view class="flex-item" style="width: 78%;">
						<text class="down-icon"></text>
						<picker :value="store_index" :range="storehouse" :range-key="'name'" class="input"
							@change="bindPickerChange($event,'store_index','storeId','storehouse')">
							<view class="uni-input">{{storehouse[store_index].name}}</view>
						</picker>
					</view>
				</view>
			</view>


			<view class="house_w">
				<!--入库仓库：{{goodsinfos.warehouseName}}-->
				<view class="row">
					<label><span style="color:red">*</span>出库仓库:</label>
					<view class="flex-item" style="width: 78%;">
						<text class="down-icon"></text>
						<picker :value="house_indexs" :range="warehouseListss" :range-key="'name'" class="input"
							@change="bindPickerChange($event,'house_indexs','outwarehouseId','warehouseListss')">
							<view class="uni-input">{{warehouseListss[house_indexs].name}}</view>
						</picker>
					</view>
				</view>
			</view>

			<view class="house_w">
				<view class="row">
					<label>出库库位:</label>
					<view class="flex-item" style="width: 78%;">
						<text class="down-icon"></text>
						<picker :value="store_indexs" :range="storehouses" :range-key="'name'" class="input"
							@change="bindPickerChange($event,'store_indexs','storeIds','storehouses')">
							<view class="uni-input">{{storehouses[store_indexs].name}}</view>
						</picker>
					</view>
				</view>
			</view>
			
			<view class="house_w">
				<view class="row">
					<label><span style="color:red">*</span>部门:</label>
					<view class="flex-item" style="width: 78%;">
						<text class="down-icon"></text>
						<picker :value="dept_index" :range="deptLists" :range-key="'name'" class="input"
							@change="bindPickerChange($event,'dept_index','deptId','deptLists')">
							<view class="uni-input">{{deptLists[dept_index].name}}</view>
						</picker>
					</view>
				</view>
			</view>
			
			<view class="house_w">
				<view class="row">
					<label><span style="color:red">*</span>人员:</label>
					<view class="flex-item" style="width: 78%;">
						<text class="down-icon"></text>
						<picker :value="user_index" :range="userLists" :range-key="'name'" class="input"
							@change="bindPickerChange($event,'user_index','userId','userLists')">
							<view class="uni-input">
								{{userLists[user_index].name}}
							</view>
						</picker>
					</view>
				</view>
			</view>

			<view class="house_w">
				<view class="row">
					<label><span style="color:red">*</span>类型:</label>
					<view class="flex-item" style="width: 78%;">
						<text class="down-icon"></text>
						<picker :value="dictlists_index" :range="dictlists" :range-key="'label'" class="input" @change="bindPickerChanges($event)">
							<view class="uni-input">{{dictlists[dictlistsId].label}}</view>
						</picker>
					</view>
				</view>
			</view>
			<view class="house_w">
			 	<view class="row">
			 		<label>客户名称:</label>
			 		<view class="flex-item" style="width: 78%;">
			 			<text class="down-icon"></text>
			 			<picker 
							:value="customer_index" 
							:range="customerList" 
							class="input" 
							:range-key="'name'"
							@change="bindPickerChangess($event)">
			 				<view class="uni-input">{{customerList[customerIndex].name}}</view>
			 			</picker>
			 		</view>
			 	</view>
			</view>
			<div class="line">
				1
			</div>
		</view>
		<view style="width: 100%;" v-if="addProductInfo.length==0">
			<image src="/static/images/nomsg.png" style="width: 100%;"></image>
		</view>

		<view class="goodslists">
			<view class="goods-item" v-for="(item,chIndex) in addProductInfo">
				<view @click="toDetail(item,chIndex)">
					<view class="top-centers">
						<view class="left">产品编码：{{item.productCode || item.code}}</view>
						<view class="lefts">产品分类：{{item.productTypeName}}</view>
					</view>
					<view class="contents">
						<view class="itemss">
							<view class="text" v-if="item.productName">{{item.productName}}</view>
							<view class="text" v-if="!item.productName">{{item.name}}</view>
							<view class="texts">单价:<text style="color:#33333;">￥{{item.buyTaxPrice}}</text></view>
							<view class="texts">尺寸:<text
									style="color: #333;">{{item.length}}*{{item.width}}*{{item.length}}</text></view>

						</view>
						<view class="itemsss">
							<view class="textss">￥{{item.taxAmount}}</view>
							<view class="textsss">数量:<text style="color: #333333;">{{item.productCount}}</text></view>
						</view>
					</view>
				</view>
				<view class="dels" @click="delProduct(cIndex,item)"></view>
			</view>
		</view>

		<!--
		<deptTrees :coupon='coupon' @ChangCouponsClone="ChangCouponsClone" @ChangCoupons="ChangCoupons"></deptTrees>-->
		<view class="tabBar" v-if="infos.orderStatus!='PASS'">
			<image class="tabBar-img" src="/static/images/sand-code.png" @click="scanCode"></image>
			<image class="tabBar-img" src="/static/images/Add(3).png" @click="addProducts" style="margin-left: 28rpx;">
			</image>

			<view class="tabBar-buttom" style="background-color: #E93D43;" @click="submit('submit')">
				提交
			</view>
			<view class="tabBar-buttom" style="background-color: #5DB631;" @click="submit('save')">
				保存
			</view>
		</view>
	</view>
</template>

<script>
	import uniCard from '@/components/uni-card/uni-card.vue'
	import {
		getWareOrderDetail,
		warehouseList,
		userList,
		getsupplierList,
		addWareOrder,
		removeWareorder,
		submitWareOrderDetail,
		toGoodsDetail,
		deptlist,
		warehouseLists,
		deptTrees,
		userLists,
		getDictlists,
		submitSplitorders, //详情中提交(保存并提交APP拆装单)
		submitSplitaddOrSave, //详情中保存(新增或修改APP拆装单)
		calProductInfo,
		getstorehouseList,
		customerLists
	} from "../../api/public.js"
	export default {
		components: {
			uniCard
		},
		data() {
			return {
				customerIndex:0,
				customerList:[
					{'id':'',
					'name':''}
				],
				customer_index:'',
				windowHeight: '',
				cardList: [],
				note: true,
				isShadow: true,
				cardInfo: [],
				id: null,
				user_index: 0,
				dictlists_index: 0,
				house_index: 0,
				house_indexs: 0,
				dept_index: 0,
				store_index: 0,
				store_indexs: 0,
				//属性是否打开
				storehouse: [{
					name: ' ',
					id: ''
				}, ],
				storehouses: [{
					name: ' ',
					id: ''
				}],
				coupon: {
					'coupon': false,
					list: [],
				},
				warehouseLists: [{
					name: ' ',
					id: ''
				}],
				warehouseListss: [{
					name: ' ',
					id: ''
				}],
				userLists: [{
					name: ' ',
					id: ''
				}],
				dictlists: [{
					name: ' ',
					id: ''
				}],

				deptLists: [{
					name: ' ',
					id: ''
				}],
				//提交下拉框数据
				supplierId: null,
				storeId: null,
				storeIds: null,
				userId: null,
				deptId: null,
				warehouseId: null,
				inwarehouseId: null,
				outwarehouseId: null,
				remark: '',
				value: '',
				infos: {
					orderStatus: '',
					productName: '',
					productId: ''
				},
				save_id: null,
				shows: false,
				//添加的商品信息
				addProductInfo: [],
				userListsOrigin:'',
				dictlistsId:0,
				customerId:''
			}
		},
		watch:{
			deptId(newVal, oldVal){
				this.user_index = 0
				if(newVal === ''){
					this.userLists = this.userListsOrigin
				}else if(newVal !== oldVal){
					//监听到deptId有值后将人员过滤
					this.f()
				}
			}
		},
		onShow() {
			if (uni.getStorageSync("addProductInfo")) {
				this.value = JSON.parse(uni.getStorageSync("addProductInfo"));
				if (Array.isArray(this.value)) {
					this.addProductInfo = this.value;
				} else {
					this.addProductInfo.push(this.value);
				}
				console.log('onShow--this.addProductInfo',this.addProductInfo)
				try{
					uni.setStorageSync('page_dismounting_add', JSON.stringify(this.addProductInfo))
				}catch(e){
					//TODO handle the exception
				}
				uni.removeStorageSync("addProductInfo")
			}
			if (uni.getStorageSync("search")) {
				this.infos = uni.getStorageSync("search");
				this.infos['productName'] = this.infos.name;
				this.infos['productId'] = this.infos.id;
				// JSON.parse(this.infos.childList).forEach(item =>
				// 	this.addProductInfo.push(item)
				// )
				uni.removeStorageSync("search")
			}
		},
		onLoad(option) {
			uni.showLoading({
				title: '加载中'
			});
			if (option.id) {
				this.id = option.id
				this.infos = uni.getStorageSync(this.id + "_infos");
				if (uni.getStorageSync("addProductInfo")) {
					this.value = JSON.parse(uni.getStorageSync("addProductInfo"));
					this.addProductInfo = this.value;
					uni.removeStorageSync('addProductInfo');
				} else {
					this.value = JSON.parse(this.infos.detailList)
					this.addProductInfo = this.value;
				}
				uni.removeStorageSync(this.id + "_infos");
			}
			// if (uni.getStorageSync("search")) {
			// 	this.infos = uni.getStorageSync("search");
			// 	this.infos['productName'] = this.infos.name;
			// 	this.infos['productId'] = this.infos.id;
			// 	JSON.parse(this.infos.childList).forEach(item =>
			// 		this.addProductInfo.push(item)
			// 	)
			// }
			// console.log(this.addProductInfo);
			warehouseLists().then(res => {
				res.content.forEach(item => this.warehouseLists.push(item));

			})
			warehouseLists().then(res => {
				res.content.forEach(item => this.warehouseListss.push(item));

			})

			//getstorehouseList
			getstorehouseList().then(res => {
				// console.log(res)
				res.content.forEach(item => this.storehouse.push(item));

			})
			getstorehouseList().then(res => {
				// console.log(res)
				res.content.forEach(item => this.storehouses.push(item));

			})

			deptTrees().then(res => {
				let ress = res.content[0].children
				for (var i = 0; i < ress.length; i++) {
					this.deptLists.push(ress[i])
					// for (var a = 0; a < ress[i].children.length; a++) {
					// 	this.deptLists.push(ress[i].children[a])
					// }
				}
				//res.content.forEach(item => this.deptLists.push(item));
			})

			userLists().then(res => {
				res.content.forEach(item => this.userLists.push(item));
			})

			getDictlists("split_type").then(res => {
				res.content.forEach(item => this.dictlists.push(item));
			})
			//this.getWareOrderDetail(this.id)
			this.getCustomerList()
			this.userListsOrigin = this.userLists
			uni.hideLoading();
		},
		filters: {
			times: function(time) {
				var myDate = new Date(parseInt(time));
				return (myDate =
					myDate.getFullYear() +
					"-" +
					(myDate.getMonth() + 1) +
					"-" +
					myDate.getDate() +
					"");
			}
		},
		methods: {
			bindPickerChangess: function(e) {
				this.customerIndex = e.target.value 
				this.customerId = this.customerList[this.customerIndex].id
			},
			getCustomerList(){
				customerLists({
					size:999
				}).then(res => {
					res.content.forEach(item => this.customerList.push(item))
					// console.log('this.infos',this.infos)
					// console.log('this.customerList',this.customerList)
					for (var i = 0; i < this.customerList.length; i++) {
						if (this.customerList[i].id == this.infos.customerId) {
							this.customerIndex = i
						}
					}
				})
			},
			delProduct(cIndex, id) {
				this.addProductInfo.splice(cIndex, 1)
			},
			async changecount() {
				let values = JSON.parse(this.infos.childList);
				let moneys = 0;
				//infos.taxAmount
				for (let i = 0; i < values.length; i++) {
					if (this.infos.count) {

						calProductInfo({
							productId: values[i].id,
							productCount: parseInt(values[i].productCount) * parseInt(this.infos.count),
							type: "BUY",
							taxPrice: values[i].buyTaxPrice
						}).then(res => {
							//values[i].taxAmount = res.taxAmount
							//values[i].boxCount = res.boxCount
							values[i].productCount = res.productCount
							moneys = moneys + res.taxAmount
							this.infos.taxAmount = moneys
							this.addProductInfo = values
						})
					}
				}
			},
			addProducts() {
				uni.navigateTo({
					url: "/pages/goodsDetails/lists"
				})
			},
			tolist() {
				uni.navigateTo({
					url: "/pages/goodsDetails/detail"
				})
			},
			dropDownData() {
				let that = this;
				//if (this.id !== '') this.initDropDown(that.warehouseLists, 'house_index', 'warehouseId');
			},
			// 下拉框赋初始值
			initDropDown(data, listIndex, id) {
				if (data) {
					this[id] = this.cardList[id];
					data.some((item, i) => {
						if (item.id == this[id]) {
							this[listIndex] = i
							return true
						}
					})
				}
			},
			//下拉框切换
			bindPickerChange: function(e, index, type, list_name) {
				// console.log('this.deptId',this.deptId)
				if(type === 'userId' && (this.deptId === null || this.deptId === '')){
					uni.showToast({
						title: '请先选择部门后再选人员',
						icon: 'none',
						duration: 2000
					})
					return
				}
				this[index] = e.target.value
				this[type] = this[list_name][e.target.value].id
			},
			bindPickerChanges: function(e) {
				this.dictlistsId = e.target.value
				this.splitId = e.target.value
				// console.log('this.splitId',this.splitId)
			},
			scanCode: function() {
				let that = this;
				//扫码
				uni.scanCode({
					success: function(res) {
						// console.log('条码内容：' + res.result);
						uni.navigateTo({
							url: "/pages/goodsDetails/lists?keyword=" + res.result
						})
						// uni.navigateTo({
						// 	url: "../goodsDetail/index?barCode=" + null + "&id=" + res.result +
						// 		"&index=" + null
						// });
					}
				});
				/**
				uni.navigateTo({
					url: "/pages/goodsDetails/index?barCode=" + null + "&id=" + 2 + "&index=" + null
				})**/
			},
			toDetail(item, indexs) {
				if (this.addProductInfo[indexs].orderStatus != "PASS") {
					console.log('toDetail-------item',item)
					let barCode = item.barcode;
					let id = item.productId;
					let orderid = this.id;
					// return
					uni.navigateTo({
						url: "/pages/goodsDetailssssss/index?barCode=" + barCode + "&id=" + id + "&orderid=" + orderid +
							"&index=" + indexs
					})
				} else {
					uni.showToast({
						title: '不可修改',
						icon: 'none',
						duration: 2000
					})
				}
			},
			beforeSubmit: function() {
				if (!this.infos.taxAmount) {
					uni.showToast({
						title: '金额不能为空',
						icon: 'none',
						duration: 2000
					})
					return false
				}
				if (!this.inwarehouseId) {
					uni.showToast({
						title: '入库仓库不能为空',
						icon: 'none',
						duration: 2000
					})
					return false
				}
				if (!this.outwarehouseId) {
					uni.showToast({
						title: '出库仓库不能为空',
						icon: 'none',
						duration: 2000
					})
					return false
				}
				if (!this.userId) {
					uni.showToast({
						title: '人员不能为空',
						icon: 'none',
						duration: 2000
					})
					return false
				}
				if (!this.deptId) {
					uni.showToast({
						title: '部门不能为空',
						icon: 'none',
						duration: 2000
					})
					return false
				}
				if (!this.dictlistsId) {
					uni.showToast({
						title: '类型不能为空',
						icon: 'none',
						duration: 2000
					})
					return false
				}
				if (this.addProductInfo.length == 0 || this.infos.productName.length == 0) {
					uni.showToast({
						title: '产品不能为空',
						icon: 'none',
						duration: 2000
					})
					return false
				}
				return true
			},
			submit: function(type) {
				uni.showLoading({
					title: '加载中'
				});
				if (this.beforeSubmit()) {

					for (let i = 0; i < this.addProductInfo.length; i++) {
						this.addProductInfo[i].productCode = this.addProductInfo[i].code
						this.addProductInfo[i].productName = this.addProductInfo[i].name
						this.addProductInfo[i].productId = this.addProductInfo[i].id
					}
					// console.log('this.addProductInfothis.addProductInfothis.addProductInfo')
					// console.log(this.addProductInfo[0].name)
					let goodsList = this.addProductInfo;
					this.infos['contractNo'] = this.infos.contractNo //这个打印出来是undefined
					this.infos['bomCode'] = this.infos.bomCode //这个打印出来是undefined
					this.infos['supplierId'] = this.supplierId
					this.infos['userId'] = this.userId
					this.infos['outWarehouseId'] = this.outwarehouseId
					this.infos['outStorehouseId'] = this.storeIds
					this.infos['inWarehouseId'] = this.inwarehouseId
					this.infos['inStorehouseId'] = this.storeId
					this.infos['deptId'] = this.deptId
					this.infos['remark'] = this.remark
					this.infos['splitType'] = this.splitId
					this.infos['detailList'] = JSON.stringify(goodsList)
					this.infos['customerId'] = this.customerId
					if (type == 'submit') {
						this.infos['id'] = this.save_id
						submitSplitorders(this.infos).then(res => {
							uni.hideLoading()
							for (let i = 0; i < this.addProductInfo.length; i++) {
								this.addProductInfo[i].orderStatus = 'PASS'
							}
							if (res.status != 500) {
								this.infos.orderStatus = 'PASS';
								uni.showToast({
									title: '提交成功',
									icon: 'none',
									duration: 2000
								})
								// setTimeout(function() {
								// 	uni.navigateTo({
								// 		url: "/pages/dismounting/index"
								// 	})
								// }, 2000);
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none',
									duration: 2000
								})
							}
						}).catch(e => {
							uni.hideLoading()
							uni.showToast({
								title: '提交失败',
								icon: 'none',
								duration: 2000
							})
						})
					} else {
						this.infos['id'] = ''
						submitSplitaddOrSave(this.infos).then(res => {
							this.save_id = res.data.id
							uni.hideLoading()
							uni.removeStorageSync('search');
							uni.showToast({
								title: '保存成功',
								icon: 'none',
								duration: 2000
							})
							setTimeout(function() {
								uni.navigateTo({
									url: "/pages/dismounting/index"
								})
							}, 1000);
						}).catch(e => {
							uni.hideLoading()
							uni.showToast({
								title: '保存失败，请重试',
								icon: 'none',
								duration: 2000
							})
						})
					}
				}
			},
			//删除商品
			delProduct(cIndex, id) {
				this.addProductInfo.splice(cIndex, 1)
				if (id) {
					removeWareorder(id).then(res => {
						uni.showToast({
							title: '删除成功',
							icon: 'none',
							duration: 2000
						})
					})
				} else {
					uni.showToast({
						title: '删除成功',
						icon: 'none',
						duration: 2000
					})
				}
			},
			//人员根据部门ID过滤
			f(arr){
				this.userLists = this.userListsOrigin
				let usersArr = this.userLists
				let id = [this.deptId]
				let usersArrFirst = {name:''}
				this.userLists = usersArr.filter((item) => id.includes(item.deptId))
				this.userLists.unshift(usersArrFirst)
			},
		}
	}
</script>

<style lang="scss">
	.warp {
		background-color: rgb(48, 117, 231);
		color: #FFFFFF;
		width: 100%;
		padding-bottom: 9%;
		position: relative;
	}

	label {
		width: 20%;
		line-height: 60rpx;
		height: 60rpx;
		float: left;
		font-size: 28rpx;
		display: block;
	}

	.flex-item-inputs {
		border-radius: 10rpx;
		border: none;
		height: 60rpx;
		width: 78%;
		padding-left: 2%;
		background-color: rgba(255, 255, 255, 0.2);
		float: left;
	}

	.footer-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: space-between;
		flex-direction: row;
	}

	.delete-img {
		width: 26px;
		height: 26px;
	}

	.down-icon {
		position: absolute;
		width: 18px;
		height: 18px;
		background: url(../../static/images/jiantous.png) no-repeat center;
		background-size: 100%;
		right: 5%;
		margin-top: 2%;
	}

	.uni-input {
		font-size: 30rpx;
		text-align: center;
		width: 100%;
		overflow: hidden;
		line-height: 60rpx;
	}

	.input {
		float: left;
		width: 100%;
		margin: 2% 4rpx;
		height: 60rpx;
		background: rgba(255, 255, 255, 0.3);
		border-radius: 12rpx;
		color: #FFFFFF;
	}

	.flex-item-name {
		display: inline-block;
		text-align: center;
		font-size: 28rpx;
		width: 19%;
		vertical-align: middle;
	}

	.flex-item {
		display: inline-block;
		text-align: left;
		font-size: 26rpx;
		width: 30%;
		vertical-align: middle;
	}

	.flex-item-fonts {
		font-size: 28rpx;
	}

	.flex-item-font {
		font-size: 28rpx;
	}

	.flex-item-input {
		border-radius: 10rpx;
		border: none;
		height: 60rpx;
		width: 98%;
		padding-left: 2%;
		background-color: rgba(255, 255, 255, 0.2);
	}

	.goodslists {
		width: 100%;
		overflow: hidden;
		margin: 10rpx auto 98rpx auto;

		.goods-item {
			width: 95%;
			overflow: hidden;
			box-shadow: 0px 0px 18rpx 0px rgba(0, 0, 0, 0.15);
			margin: 22rpx auto;
			border-radius: 12rpx;

			.dels {
				width: 100%;
				overflow: hidden;
				border-top: 1rpx solid #f1f1f1;
				height: 58rpx;
				background: url(../../static/images/del-icon.png) no-repeat left;
				background-size: 42rpx;
				background-position: 12rpx;
			}

			.contents {
				width: 94%;
				padding: 3%;
				overflow: hidden;
				display: inline-flex;

				.items {
					width: 168rpx;
					height: 168rpx;
				}

				.itemss {
					width: 30%;
					margin-left: 18rpx;

					.text {
						color: #333333;
						line-height: 58rpx;
						font-weight: 600;
						font-size: 30rpx;
					}

					.texts {
						color: #999999;
						line-height: 58rpx;
						font-size: 26rpx;
					}

				}

				.itemsss {
					text-align: right;
					width: 69%;
					margin-left: 18rpx;

					.textss {
						color: #F27042;
						font-size: 30rpx;
						line-height: 58rpx;
					}

					.textsss {
						color: #999999;
						font-size: 28rpx;
						line-height: 58rpx;
					}
				}
			}

			.top-centers {
				width: 94%;
				padding: 3%;
				overflow: hidden;
				margin: 0rpx auto;
				border-bottom: 1rpx solid #f1f1f1;

				.left {
					width: 50%;
					overflow: hidden;
					margin: 0rpx auto;
					float: left;
					font-size: 28rpx;
					color: #666666;
					text-align: left;
				}

				.lefts {
					width: 50%;
					overflow: hidden;
					margin: 0rpx auto;
					color: #666666;
					float: left;
					font-size: 28rpx;
					text-align: right;
				}
			}
		}

	}

	.row {
		width: 96%;
		overflow: hidden;
		margin: 18rpx auto;

		.left {
			float: left;
			width: 50%;
			text-align: left;
			overflow: hidden;
			font-size: 28rpx;
		}

		.right {
			float: left;
			width: 50%;
			text-align: right;
			overflow: hidden;
			font-size: 28rpx;
		}
	}

	.rows {
		width: 96%;
		overflow: hidden;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		margin: 0rpx auto;
		border-bottom: 1rpx solid #f1f1f1;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.head-info {
		width: 100%;
		background-color: #C0282D;
		padding-bottom: 3%;
		position: relative;
	}

	.head-title {
		width: 96%;
		color: white;
		font-size: 26rpx;
		border-bottom: 1px solid #FFFFFF;
		padding-top: 2%;
		padding-bottom: 2%;
		margin: 2%;
	}

	.head-content {
		width: 96%;
		color: white;
		font-size: 30rpx;
		padding-top: 2%;
		margin: 2%;
	}

	.head-content_p {
		font-size: 30rpx;
		font-weight: 900;
		color: white;
		padding-bottom: 2%;
	}

	.line {
		width: 100%;
		height: 68rpx;
		border-radius: 50rpx;
		position: absolute;
		background-color: #FFFFFF;
		color: #FFFFFF;
		text-align: center;
		bottom: -48rpx;
	}


	.card {
		width: 94%;
		margin-left: 2%;
		color: #999999;
		font-size: 26rpx;
	}

	.card_p {
		font-size: 30rpx;
		font-weight: 900;
		color: #333333;
	}

	.tabBar-img {
		position: relative;
		width: 50rpx;
		height: 50rpx;
		top: 20%;
		left: 3%;
	}

	.tabBar {
		position: fixed;
		bottom: 0rpx;
		width: 100%;
		background: #FFFFFF;
		border-top: 2rpx solid #F2F6FC;
		height: 88rpx;
		overflow: hidden;
	}

	.tabBar-buttom {
		float: right;
		width: 228rpx;
		height: 68rpx;
		line-height: 68rpx;
		margin-top: 6rpx;
		margin-right: 14rpx;
		border-radius: 12rpx;
		text-align: center;
		color: #FFFFFF;
		font-size: 28rpx;
	}
</style>
